<script>
import { Vip } from '../../api'
export default {
  data() {
    return {
      val: "",
      vipVisible: false,
      writeVisible: false,
      //弹框
      centerDialogVisible: false,
      rechargeVisible: false,
      deleteVisible: false,
      radio: '1',
      formData: {
        id: "",
        userid: "",
        phone: "",
        sex: "",
        recharge: "",
        petname: ""
      },
      //获取会员数据
      tablelist: [],
      //搜索数据
      selectlist: []

    }
  },
  methods: {
    //获取列表
    async getlist() {
      let res = await Vip["list"]();
      console.log(res);
      this.tablelist = res.data
    },
    //搜索方法
    async select(phone) {
      console.log(phone, "phone!!!!!");
      if (phone) {
        let res = await Vip["select"](phone);
        this.selectlist = res.data
        console.log(res.data);
        //只显示搜索到的信息
        this.tablelist = res.data
        console.log(this.tablelist);
      } else {
        this.getlist()
      }
    }

  },

  mounted() {
    this.getlist()
  }
}
</script>
<template>
  <div>
    <div id="all">
      <div id="top">
        <input placeholder="请输入会员手机号..." v-model="val" @keydown.enter="select(val)">
        <button @click="select(val)">搜索</button>
      </div>
      <div id="main">
        <el-table :data="tablelist" stripe style="width: 100%">
          <el-table-column prop="id" label="id" width="180">
            <template slot-scope="scope">
              <div>
                {{ scope.row.id }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="userid" label="用户名" width="180">
            <template slot-scope="scope">
              <div>
                {{ scope.row.userid }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="phnoe" label="手机号">
            <template slot-scope="scope">
              <div>
                {{ scope.row.phone }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sex" label="性别">
            <template slot-scope="scope">
              <div>
                {{ scope.row.sex }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="recharge" label="充值金额">
            <template slot-scope="scope">
              <div>
                {{ scope.row.recharge }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="petname" label="宠物">
            <template slot-scope="scope">
              <div>
                {{ scope.row.petname }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>
  </div>
</template>

<style scoped>
#top {
  height: 50px;
  width: 100%;
  margin: 20px 0 0 0;
  display: flex;
  background: #fff;
}

input {
  height: 30px;
  width: 300px;
  margin-top: 10px;
  margin-left: 30px;
  margin-right: 600px;
  border-radius: 18px;

  border: none;
  text-indent: 1.5em;
  background: #f4f2f2;
  outline: none;
}

#top>button {
  background: rgb(251, 215, 11);
  font-size: 10px;
  margin-top: 10px;
  margin-left: 50px;
  height: 30px;
  width: 60px;
  border: none;
  border-radius: 20px;
}

#main {
  background: #fff;
  width: 100%;
  height: 400px;
  margin: 20px 10px;
}

#all {
  background: #f4f2f2;
}
</style>